<template>
	<view class="main">
		<u-navbar title="项目详情" title-color="black">
			<u-icon v-show="isCollect" name="star-fill" slot="right" @click="collect" :size="40" color="#facc14"
				style="margin-right: 40rpx;"></u-icon>
			<u-icon v-show="!isCollect" name="star" slot="right" @click="collect" :size="40"
				:color="$u.color['contentColor']" style="margin-right: 40rpx;"></u-icon>
		</u-navbar>
		<view class="box">
			<view style="background-color: #FFFFFF;padding: 30rpx;">
				<view class="name">
					<span style="font-weight: bold;">{{proName}}</span>
					<p style="font-size: 24rpx;color: rgba(60, 60, 60, 1);margin-top: 14rpx;">项目编号：{{ProjectNo}}</p>
				</view>
				<!-- 岗位 -->
				<u-line color="#c8c8c8" margin="30rpx 0" />
				<view class="reward">
					<span style="font-size: 30rpx;">项目岗位</span>
					<view v-for="(item,index) in postInfo" :key="item.id" class="post">
						<view>
							<span style="font-size: 32rpx; font-weight: 600;">{{item.name}}</span>
							<span style="font-size: 28rpx; margin: 0 30rpx;">开发语言：{{item.lang.name}}</span>
						</view>
						<view style="margin: 20rpx 0;">
							<view style="font-size: 28rpx;display: flex;align-items: center;">
								<u-image src="../../../static/image/money.png" mode="" width="30rpx" height="30rpx">
								</u-image> 项目价格：<text style="color: #2979FF;">{{item.price}}</text>元
							</view>
							<view style="font-size: 28rpx;">
								<u-icon name="calendar" color=""></u-icon>开发周期：{{item.cycle}}天
							</view>
						</view>
						<!-- <view style="margin-top: 20rpx">岗位要求：</view>
						<view>描述</view> -->
					</view>
				</view>
			</view>
			<!-- 基本信息 -->
			<view class="information">
				<span style="font-weight: bold;">基本信息</span>
				<u-line color="#c8c8c8" margin="14rpx 0" />
				<u-parse class="proContent" :html="proStandard"></u-parse>
				<!-- <p>投稿截止：2022-04-01 23:5</p>
				<p>交稿截止：2022-04-05 23:5</p>
				<p>开发票终端：</p> -->
			</view>
			<!-- 基本要求 -->
			<view class="information">
				<span style="font-weight: bold;">基本要求</span>
				<u-line color="#c8c8c8" margin="14rpx 0" />
				<u-parse class="proContent" :html="proReword"></u-parse>
			</view>
			<!-- 任务详情 -->
			<view class="information">
				<span style="font-weight: bold;">任务详情</span>
				<u-line color="#c8c8c8" margin="14rpx 0" />
				<u-parse class="proContent" :html="proContent"></u-parse>
			</view>
		</view>
		<view class="bottom" style="position: fixed; bottom: 0; width: 100%;">
			<view style="float: left; margin-left: 10rpx;" @click="goHome">
				<u-icon size="50" name="home" color="rgba(0,0,0,.2)" style="margin-left:20rpx;"></u-icon>
				<view class="text u-line-1" style="color:rgba(0,0,0,.4); font-size: 20rpx">返回首页</view>
			</view>
			<u-button class="button" :style="{'background-color': disabled? '#f5f5f5' : '#1890FF'}" @click="getTask"
				:disabled="disabled">接取任务
			</u-button>
		</view>
		<!-- 填写个人信息弹窗 -->
		<view>
			<u-modal ref="uUserInfoModal" show-cancel-button v-model="formUserInfoShow" title="请补充个人信息"
				confirm-text="提交" confirm-color="#1890FF" :async-close="true" :zoom="true" @confirm="userInfoConfirm">
				<view style="width: 80%; margin: 20rpx auto;">
					<u-form :model="userInfoForm" ref="userInfoForm">
						<u-form-item label="姓名" prop="name" label-width="120rpx">
							<u-input v-model="userInfoForm.name" />
						</u-form-item>
						<!-- <u-form-item label="手机号" prop="mobile" label-width="120rpx">
							<u-input v-model="userInfoForm.mobile" />
						</u-form-item> -->
						<u-form-item label="擅长岗位" prop="expert" label-width="120rpx">
							<u-input v-model="userInfoForm.expert" type="textarea" :border="true" height="100"
								:auto-height="true" />
						</u-form-item>
					</u-form>
				</view>
			</u-modal>
		</view>

		<!-- 填写岗位信息 -->
		<view style="position:absolute; z-index: 9;">
			<u-modal ref='proPostModal' show-cancel-button v-model="formTaskPostShow" title="请选择接取的岗位"
				confirm-text="接取任务" confirm-color="#1890FF" :async-close="true" :zoom="true" @confirm="postConfirm">
				<view style="width: 80%; margin: 20rpx auto;">
					<u-form :model="proPostForm" ref="uPostForm">
						<u-form-item label="项目名称" label-width="150">
							<u-input v-model="proPostForm.proName" disabled />
						</u-form-item>
						<u-form-item label="项目岗位" label-width="150">
							<u-input v-model="proPostForm.proPost" placeholder="请选择项目岗位" type="select"
								@click="selectshow = true" />
						</u-form-item>
					</u-form>
				</view>

			</u-modal>
		</view>
		<view style="position:absolute; z-index: 9999;">
			<u-select v-model="selectshow" :list="proPostList" @confirm='actionSheetCallback'>
			</u-select>
		</view>
		<!-- 提示按钮 -->
		<!-- <view class="wenhao">
			<u-image height="100rpx" width="100rpx" @click="clickWenhao" src="../../../static/image/wenhao.png">
			</u-image>
		</view>
		<view class="duihao">
			<u-image height="100rpx" width="100rpx" @click="clickDuihao" src="../../../static/image/duihao.png">
			</u-image>
		</view> -->
		<!-- 提示文字 -->
		<view class="fixed">
			<div style="width: 38rpx;height: 44rpx;">
				<u-swiper :list="textAvatar" interval="30000" :circular="false" height="44"></u-swiper>
			</div>
			<u-notice-bar :volume-icon="false" mode="horizontal" :list="textList" :is-circular="false" type="error" style="width: 420rpx;" padding="0rpx 0rpx" color="#FFFFFF" bg-color="rgba(0, 0, 0, 0)" :duration="30000"></u-notice-bar>
		</view>
		<!-- 提示信息2 -->
		<view>
			<u-modal style="ovflow:hidden" ref='wenhaoModal' v-model="wenhaoShow" title="温馨提示" confirm-text="确定"
				confirm-color="#1890FF" :async-close="true" :zoom="true" @confirm="confirm">
				<scroll-view scroll-y="true" style="height: 1000rpx; width: 100%; padding: 20rpx 0; ">
					<u-parse class="proContent" :html="WarmTipsContent"></u-parse>
				</scroll-view>
			</u-modal>
		</view>
		<!-- 提示信息3 -->
		<view>
			<u-popup v-model="duihaoShow" mode="center" width="600rpx" height="600rpx" border-radius="14" closeable
				close-icon-pos="top-right">
				<view class="contactUs">
					<view style="margin: 30rpx 0; font-size:34rpx;font-weight: 700;">
						关注公众号获取更多项目信息
					</view>
					<u-image width="300rpx" height="300rpx" :src="picSrc">
					</u-image>
					<view style="margin: 40rpx auto;">长按二维码保存到本地</view>
					<!-- <u-button @click="copy" class="button" shape="circle" style="width: 80%;margin: 40rpx 0;">保存到相册</u-button> -->
				</view>
			</u-popup>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				textList:[],
				textAvatar:[],
				picSrc: "",
				WarmTipsContent: "",
				wenhaoShow: false,
				duihaoShow: false,
				disabled: false,
				id: 0,
				isCollect: false,
				proName: "项目名称",
				proContent: "",
				proStandard: "",
				proReword: "",
				times: 0,
				ProjectNo: "",
				postId: '',
				postInfo: [],
				formUserInfoShow: false,
				formTaskPostShow: false,
				selectshow: false,
				userInfoForm: {
					name: "",
					mobile: "",
					expert: "",
					position_id: ''
				},
				userInfoRules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					// mobile: [{
					// 	required: true,
					// 	message: '请输入手机号',
					// 	// 可以单个或者同时写两个触发验证方式 
					// 	trigger: ['change', 'blur'],
					// }],
					expert: [{
						required: true,
						message: '请输入擅长岗位',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				},
				proPostForm: {
					proName: "",
					proPost: ""
				},
				proPostRules: {
					proName: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					proPost: [{
						required: true,
						message: '请输入手机号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
				},
				proPostList: [],
			}
		},
		methods: {
			// 收藏商品
			collect() {
				this.$u.api.CollectionProject({
					project_id: this.id
				}).then(res => {
					if (res.code == 1) {
						if (this.isCollect) {
							this.$u.toast("取消收藏成功")
							this.isCollect = false
						} else {
							this.$u.toast("收藏成功")
							this.isCollect = true
						}
					}
				})
			},
			// 返回首页
			goHome() {
				// uni.switchTab({
				// 	url: "/pages/list/list"
				// })
				this.$Router.push({
					name: "list"
				})
			},
			// 接受任务
			getTask() {
				this.$u.api.getUserInfo().then(res => {
					if (res.code == 1) {
						this.userInfoForm.mobile = res.data.mobile
						this.userInfoForm.name = res.data.nickname
						if (!res.data.name || !res.data.expert) {
							this.showUserInfoForm()
						} else {
							this.formTaskPostShow = true
						}
					}
				})
			},
			// 点击actionSheet回调,显示下拉菜单
			actionSheetCallback(e) {
				this.proPostForm.proPost = e[0].label
				this.postId = e[0].value
			},
			// 文字滚动
			textInfo(){
				this.textList= []
				this.textAvatar = []
				this.$u.api.getText().then(res =>{
					let text = res.data;
					text.forEach(item=>{
						this.textList.push(item.nickname + item.ago + '领取' + parseInt(item.money) + '元项目费用')
						this.textAvatar.push(item.avatar)
					})
				})
			},
			// 确定提交个人信息弹窗表单
			userInfoConfirm() {
				this.$refs.userInfoForm.validate(valid => {
					if (valid) {
						// if (!this.$u.test.mobile(this.userInfoForm.mobile)) {
						// 	this.$u.toast("请输入正确的手机号");
						// } else {
						// 	this.$u.api.updataUserInfo(this.userInfoForm).then(res => {
						// 		if (res.code == 1) {
						// 			this.formUserInfoShow = false
						// 		}
						// 	})
						// }
						this.$u.api.updataUserInfo(this.userInfoForm).then(res => {
							if (res.code == 1) {
								this.formUserInfoShow = false
							}
						})
					}
					this.$refs.uUserInfoModal.clearLoading()
				})


			},
			// 显示个人信息表单
			showUserInfoForm() {
				this.formUserInfoShow = true
				this.$nextTick(function() {
					this.$refs.userInfoForm.setRules(this.userInfoRules);
				})

			},
			// 项目岗位信息表单
			postConfirm() {
				if (!this.postId) {
					this.$u.toast('请选择项目岗位')
					this.$refs.proPostModal.clearLoading()
				} else(
					this.$u.api.pickTask({
						project_position_id: this.postId
					}).then(res => {
						this.formTaskPostShow = false
						if (res.code == 1) {
							// this.$u.route("/pages/list/takSeccess/takSeccess")
							this.$Router.push({
								name: "takSeccess"
							})
						} else if (res.msg == "请完善个人信息") {
							this.$u.toast(res.msg)
							this.userInfoForm.position_id = this.postId
							this.showUserInfoForm()
						} else if (res.msg == "您手里有未完成的项目") {
							this.$u.toast("您有未完成的项目，请完成后再领取任务")
						} else {
							this.$u.toast(res.msg)
						}
					})

				)

			},
			// 判断接单按钮是否置灰
			isOrderPro(value) {

			},
			// 得到详情数据
			getDetail(id) {
				this.$u.api.getInfoById({
					id
				}).then(res => {
					if (res.code === 1) {
						console.log(res.data)
						this.isCollect = res.data.collection
						this.proName = res.data.name
						this.ProjectNo = res.data.ProjectNo
						this.proPostForm.proName = res.data.name
						this.proContent = res.data.details
						this.proReword = res.data.acceptance_standard
						this.proStandard = res.data.reward_standard
						this.times = res.data.cycle
						this.postInfo = res.data.position
						if (res.data.status === 'close') {
							this.disabled = true
						}
						this.postInfo.forEach(item => {
							if (item.status === "free") {
								this.proPostList.push({
									label: item.name,
									value: item.id
								})
							}

						})
					}
				})
			},
			// 弹窗确定
			confirm() {
				this.wenhaoShow = false
				this.duihaoShow = false
			},
			// 温馨提示弹窗
			clickWenhao() {
				this.getWarmTips()
				this.wenhaoShow = true
			},
			// 公众号弹窗
			clickDuihao() {
				this.getWwChartAccount()
				this.duihaoShow = true
			},
			// 获取温馨提示内容
			getWarmTips() {
				this.$u.api.getConfigInfo({
					key: "bidding_guide"
				}).then(res => {
					if (res.code === 1) {
						this.WarmTipsContent = res.data.content
					}
				})
			},
			// 获取公众号
			getWwChartAccount() {
				this.$u.api.getConfigAdmin().then(res => {
					if (res.code === 1) {
						let pic = res.data
						this.picSrc = this.$u.http.config.baseUrl + pic
					}

				})
			},
		},
		onLoad(option) {
			this.id = option.id
			this.getDetail(option.id)
			this.textInfo()
		},
		onReady() {}
	}
</script>

<style scoped lang="scss">
	/deep/.u-model__title {
		font-weight: 700;
	}

	.main {
		padding-bottom: 140rpx;
		position: relative;
		background-color: rgba(245, 245, 245, 1);
	}

	.box {
		margin: 20rpx auto;
		border-radius: 15rpx;
		width: 90%;
	}

	.button {
		float: right;
		width: 70%;
		background-color: #1890FF;
		color: #FFFFFF;
	}

	.name {
		font-size: 36rpx;
	}

	.proContent {
		font-size: 26rpx;
		font-weight: 400rpx;
		color: rgba($color: #000000, $alpha: 0.7);
		margin-top: 20rpx;
		line-height: 50rpx;
	}

	.reward {
		margin-top: 20rpx;
		font-size: 34rpx;
		color: #333333;
	}

	.information {
		margin-top: 20rpx;
		font-size: 34rpx;
		color: #333333;
		padding: 30rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;

		p {
			font-size: 28rpx;
			color: rgba(119, 119, 119, 1);
			line-height: 40rpx;
		}
	}

	.post {
		margin: 20rpx auto;
		background-color: #f5f7fa;
		border-radius: 15rpx;
		padding: 30rpx;
	}

	.bottom {
		background-color: #FFFFFF;
		padding: 20rpx 40rpx;
	}

	.wenhao {
		z-index: 99;
		position: fixed;
		bottom: 330rpx;
		right: 20rpx;
	}

	.duihao {
		z-index: 99;
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;
	}

	.contactUs {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20rpx 0;
	}
	
	.fixed {
		z-index: 99;
		width: 480rpx;
		height: 64rpx;
		position: fixed;
		top: 48rpx;
		left: 0;
		right: 0;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #FFFFFF;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 8rpx;
		z-index: 99999;
	}
</style>
